<template xmlns:el-table="http://www.w3.org/1999/html">
    <div>
        <form>
            <!--<el-input class='input' v-model="input" placeholder="请输入酒店名称"></el-input>-->
            <!--<el-button type="primary" style="margin-left: 1530px;position:fixed;top: 0;margin-top: 10px">搜索</el-button>-->
            <div class="center">
                <i class="el-icon-user-solid"></i>
                <el-link href="http://localhost:3000/#/main/usercenter/userdetali" >个人中心</el-link>
                <i class="el-icon-s-claim"></i>
                <el-link href="http://localhost:3000/#/main/usercenter/order" >我的订单</el-link>
            </div>
        </form>
        <h1 style="margin-top: 100px; margin-left: 150px; font-size: 40px">
            {{hotel.name}}</h1>
        <el-rate
                v-model=hotel.stars
                disabled
                text-color="#ff9900"
                score-template="{value}"
                style="margin-left: 150px; margin-top: -20px; "></el-rate>
        <p style="margin-left: 150px; margin-top:3px; color:#C0C0C0">地址：{{hotel.address}}</p>
        <div style="margin-left: 150px">
            <img :src="hotel.photo1" style="height: 467px; width: 313px"/>
        </div>
        <div style="margin-left: 470px; margin-top: -238px;">
            <img :src="hotel.photo2" style="height: 234px; width:313px"/>
        </div>
        <div style="margin-left: 790px; margin-top: -471px">
            <img :src="hotel.photo3" style="height: 467px; width:312px"/>
        </div>
        <div style="margin-left: 1110px; margin-top: -234px">
            <img :src="hotel.photo4" style="height: 230px; width:320px" />
        </div>
        <div style="margin-left: 1430px; margin-top: -460px;">
            <img :src="hotel.photo5" style="height: 226px; width:335px"/>
        </div>
        <div>
            <p style="font-size: 50px ;font-weight:bold; margin-top: -200px ;margin-left: 480px">入住时间</p>
            <p style="font-size: 75px ;font-weight:bold; margin-top: -20px ;margin-left: 475px">{{hotel.checkIn}}</p>
            <p style="font-size: 50px ;font-weight:bold; margin-top: 180px ;margin-left: 1550px">离开时间</p>
            <p style="font-size: 75px ;font-weight:bold; margin-top: -220px ;margin-left: 1450px">{{hotel.checkOut}}</p>
            <p style="font-size: 40px ;font-weight:bold; margin-top: -400px ;margin-left: 1120px">房间数</p>
            <p style="font-size: 80px ;font-weight:bold; margin-top: -120px ;margin-left: 1255px">{{hotel.numRoom}}</p>
            <p style="font-size: 40px ;font-weight:bold; margin-top: -20px ;margin-left: 1300px">层</p>
            <p style="font-size: 120px ;font-weight:bold; margin-top: -150px ;margin-left: 1130px">{{hotel.numFloor}}</p>
        </div>
        <div>
            <h2 style="margin-left: 150px; margin-top: 260px">酒店房型</h2>
        </div>
        <el-container style="margin-left: 150px; margin-right: 150px">
            <el-main>
                <el-table :data="houses" class="catalogue">
                    <el-table-column  label="房型" src="photo" width="250" >
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title=""  trigger="hover" >
                                <img :src="scope.row.photo" alt="" style="width: 200px;height: 130px">
                                <img slot="reference" :src="scope.row.photo" style="width: 150px;height: 90px">
                            </el-popover>
                        </template>
                        <!--<el-avatar>-->
                            <!--<img :src="photo" alt="">-->
                        <!--</el-avatar>-->
                        <!--<img :src="houses.photo" alt="" style="width: 200px;height: 130px">-->
                    </el-table-column>
                    <el-table-column prop="name" label="房名" width="300" style="margin-top: 0px; margin-left: 10px; float: left;" >
                        <!--<el-avatar src="http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x"></el-avatar>-->
                    </el-table-column>
                    <el-table-column prop="max_in" label="入住人数" width="100" >

                    </el-table-column>
                    <el-table-column  label="网络" width="100">
                        <template slot-scope="scope">
                            {{scope.row.wifi === 1?'有':'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column  label="早餐" width="100">
                        <template slot-scope="scope">
                            {{scope.row.breakfast === 1?'有':'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column  label="卫浴" width="100">
                        <template slot-scope="scope">
                            {{scope.row.shower === 1?'有':'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column  label="退房" width="100">
                        <template slot-scope="scope">
                            {{scope.row.reback === 1?'有':'无'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="area" label="面积/㎡" width="100">
                    </el-table-column>
                    <el-table-column prop="space" label="余房/间" width="100">
                    </el-table-column>
                    <el-table-column prop="price" label="价格/晚" width="180">
                    </el-table-column>
                    <el-table-column prop="detail" label="" width="120">
                        <template slot-scope="scope">
                            <el-button
                                    type="order" icon="el-icon-shopping-cart-1"
                                    style="font-size:15px; color: #18a7e7; border:#FFFFFF; float: left"
                                    @click="handleEdit(scope.row)"
                            >
                                订购
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>

        <el-dialog
                title="下单"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form ref="from" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="phone"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="idNum"></el-input>
            </el-form-item>
            <el-form-item label="入住人数">
                <el-input v-model="inNum"></el-input>
            </el-form-item>
            <el-form-item label="日期选择">
                <el-date-picker
                        v-model="value3"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="orderSend">确定</el-button>
            </span>
        </el-dialog>
        <p style="margin-left: 200px">精彩评论</p>
        <el-container style="margin-left: 200px; margin-right: 150px">
            <el-main>
                <el-table :data="comment" class="catalogue">
                    <el-table-column prop="id" label="用户"  width="300" >
                    </el-table-column>
                    <el-table-column prop="content" label="评论" width="1000" style="margin-top: 0px; margin-left: 10px; float: left;" >
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import {hotelOne, hotelComment, houseType, orderNow, _getUserInfo} from '@api/hotel'
import image1 from '../../assets/housetype/standard_room.jpg'
import image2 from '../../assets/housetype/large_room.jpg'
import image3 from '../../assets/housetype/double_room.jpg'
import image4 from '../../assets/housetype/suite_room.jpg'
import image5 from '../../assets/housetype/vip_room.jpg'
export default {
  name: 'detail',
  data: () => {
    return {

      uId: '',
      bookNowId: '',
      bookNowPrice: '',
      input: '',
      hotels: [],
      hotel: [],
      content: '',
      dialogVisible: false,
      houses: [
        {
          id: '',
          photo: image1,
          name: '标准间',
          max_in: '',
          wifi: '',
          breakfast: '',
          shower: '',
          reback: '',
          area: '',
          space: '',
          price: ''
        },
        {
          id: '',
          photo: image2,
          name: '大床房',
          max_in: '',
          wifi: '',
          breakfast: '',
          shower: '',
          reback: '',
          area: '',
          space: '',
          price: ''
        },
        {
          id: '',
          photo: image3,
          name: '双床房',
          max_in: '',
          wifi: '',
          breakfast: '',
          shower: '',
          reback: '',
          area: '',
          space: '',
          price: ''
        },
        {
          id: '',
          photo: image4,
          name: '套房',
          max_in: '',
          wifi: '',
          breakfast: '',
          shower: '',
          reback: '',
          area: '',
          space: '',
          price: ''
        },
        {
          id: '',
          photo: image5,
          name: '总统套房',
          max_in: '',
          wifi: '',
          breakfast: '',
          shower: '',
          reback: '',
          area: '',
          space: '',
          price: ''
        }
      ],
      comment: [],
      hotel_id: '',
      value3: null,
      name: '',
      phone: '',
      idNum: '',
      inNum: ''
    }
  },
  methods: {
    orderSend () {
      console.log(this.value3)
      // const
      // console.log(this.value3.endTime)
      let data = {
        uId: this.uId,
        hId: this.hotel_id,
        bId: this.bookNowId,
        bPrice: this.bookNowPrice,
        name: this.name,
        time1: this.value3[0],
        time2: this.value3[1],
        inNum: this.inNum
      }
      this.$confirm('你确认要下单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderNow(data).then(res => {
          console.log(res.data)
        })
        this.$message({
          type: 'success',
          message: '下单成功!'
        })
        this.dialogVisible = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消订单'
        })
      })
    },
    showSom () {
      console.log((this.value3[1].getTime() - this.value3[0].getTime()) / 86400000)
      // 住的几个晚上
    },
    handleEdit (order) {
      this.bookNowId = order.id
      this.bookNowPrice = order.price
      this.dialogVisible = true
    },
    showHotel (id) {
      hotelOne(id).then(res => {
        this.hotel = res
        console.log(this.hotel)
        console.log(this.hotel.name)
      })
    },
    getCommentById (id) {
      hotelComment(id).then(res => {
        this.comment = res.data
      })
    },
    showType () {
      houseType().then(res => {
        console.log(res)
        for (let i = 0; i < 5; i++) {
          this.houses[i].id = res.data[i].id
          this.houses[i].max_in = res.data[i].maxIn
          this.houses[i].wifi = res.data[i].wifi
          this.houses[i].breakfast = res.data[i].breakfast
          this.houses[i].shower = res.data[i].shower
          this.houses[i].reback = res.data[i].inOrNot
          this.houses[i].area = res.data[i].area
          this.houses[i].space = res.data[i].remainRoom
          this.houses[i].price = res.data[i].price
        }
        console.log(this.houses)
      })
    }
  },
  created () {
    this.hotel_id = this.$route.query.h_id
    console.log(this.hotel_id)
    this.showHotel(this.hotel_id)
    this.showType()
    this.getCommentById(this.hotel_id)
    _getUserInfo().then(res => {
      this.uId = res.data.id
    })
  }
}
</script>
<style scoped>
    .center{
        margin-right: 20px;
        margin-left: 1670px;
        font-size: 30px;
        position:fixed;
        top: 0;
        margin-top: 10px;
    }
    .input{
         margin-left: 1250px;
         width: 250px;
         position:fixed;
         top: 0;
         margin-top: 10px;
     }
</style>
